<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/font/iconfont.css}" media="all">
    <!--<link rel="stylesheet" href="../layui/css/layui.css" media="all">-->
    <!--<link rel="stylesheet" href="font/iconfont.css" media="all">-->
    <title>施工管理</title>

    <style>
        body{

        }
        .layui-elem-quote{
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 9999;
        }
        .dis-mar-pad{
            margin: 1px;
            padding: 1px;
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 18px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .layui-form-label{
            font-size: 1.2em;
            font-weight: bolder;
        }
        .layui-input-inline .layui-input{
            cursor: default;
            border: none;
            font-size: 1.5em;
            font-weight: bolder;
            width: 90px;
            line-height: 38px;
        }
        .layui-input-inline .input_data{
            font-size: 1.9em;
        }
        .layui-form-item .layui-input-inline{
            width: 110px;
        }

        .data_label{
            color: #04e7ed;
            font-size: 1.7em;
            width: 46%;
            min-width: 110px;
        }
        .card_style{
            font-weight: bolder;
            font-size: 1.1em
        }
        .btn_groupt{
            display: inline-block;
            margin-left: 20px;
        }
        .btn_groupt .layui-btn{
            margin-top: 10px;
        }
        .btn_groupt .layui-btn-hover:hover{
            background-color: #00cb00;
            color: white;
            border: solid 1px white;
        }
        .running{
            color: #00FFFF;
        }
        .bc_wid{
            width: 100px;
        }
        .layui-form-item .layui-row{
            margin: 20px 0;
            font-family: 楷体;
            /*font-family: 新宋体;*/
            /*font-family: 华文行楷;*/
        }
        .layui-form-item .layui-row input{
            font-family: 宋体;
        }
        .layui-form-radio>i{
            color: #ffffff;
        }
        .layui-form-radio{
            color: #ffffff;
            z-index: 999;
            font-weight: bold;
        }
        .layui-form-radio:hover{
            color: #ff4901 !important;
        }
        .layui-form-radioed{
            color: #ffffff;
        }
        .layui-layer-tips .layui-layer-content{
            padding: 0 15px !important;
            box-shadow: 5px 5px 4px rgba(0,0,0,.2) !important;
        }
    </style>
</head>
<body style="min-width: 1200px">
<blockquote class="layui-elem-quote"><div style="font-weight: bolder;">施工操作</div>
    <div class="btn_groupt" style="width: 95%">
        <button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-hover" id="start">
            <i class="iconfont icon-kaishi running "></i>
            <span style="position: relative;top: -2px">开始</span>
        </button>
        <button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-hover" id="pause">
            <i class="iconfont icon-zanting1"></i>
            <span style="position: relative;top: -2px">暂停</span>
        </button>
        <button class="layui-btn layui-btn-radius layui-btn-normal">
            <i class="layui-icon layui-icon-set-sm"></i>
            <span style="position: relative;top: -2px">压力控制指令</span>
        </button>
        <button class="layui-btn layui-btn-radius layui-btn-normal">
            <i class="layui-icon layui-icon-set-sm"></i>
            <span style="position: relative;top: -2px">配浆控制指令</span>
        </button>
        <button class="layui-btn layui-btn-radius layui-btn-normal" id="reportView">
            <i class="layui-icon layui-icon-log"></i>
            <span style="position: relative;top: -2px">报表查看</span>
        </button>
        <button class="layui-btn layui-btn-radius layui-btn-warm" id="param_set">
            <i class="layui-icon layui-icon-set-sm"></i>
            <span style="position: relative;top: -2px">参数设置</span>
        </button>
        <button class="layui-btn layui-btn-danger" id="back" style="float: right;margin-right: 20px">
            <i class="iconfont icon-fanhui4"></i>
            <span style="position: relative;top: -2px">返回</span>
        </button>
        <button class="layui-btn" id="channel_switch" style="float: right;margin-right: 10px">
            <i class="iconfont icon-neirongqiehuan"></i>
            <span style="position: relative;top: -1px">切换到通道<span id="channel">2</span></span>
        </button>
    </div>

</blockquote>
<form class="layui-form" action="" style="margin-top: 102px">
    <div style="background-color: #999999">
        <div class="layui-col-md12" style="padding: 0;margin: 0">
                <div class="layui-card">
                <div class="layui-card-header card_style">设备信息</div>
                <div class="layui-card-body dis-mar-pad" >
                    <div class="layui-form-item dis-mar-pad" >
                        <div class="layui-inline">
                            <label class="layui-form-label">设备编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="equipNo" id="equip_No" th:value="${session.realTimeData.getDev_id()}" class="layui-input" width="" readonly="readonly" style="color: #fb0000">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">主板编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="boardNumber" id="boardNumber" th:value="2022" class="layui-input" readonly="readonly" style="color: #fb0000">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">通&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp道</label>
                            <div class="layui-input-inline">
                                <input type="text" id="channel_input" name="channel" value="1" class="layui-input" readonly="readonly" style="color: #fb0000">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" >当前状态</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input type="text" name="curState" id="curState" value="0" class="layui-input" readonly="readonly" style="color: #fb0000;width: 150px">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header card_style">实时数据</div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs12 layui-col-sm6 layui-col-md3 layui-col-lg3">
                                <label class="layui-form-label data_label">压&nbsp;&nbsp;力</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="pressure" name="yali" th:value="${session.realTimeData.pressure1}" class="layui-input input_data" readonly="readonly" style="color: #fb0000">
                                </div>
                            </div>
                            <div class="layui-col-xs12 layui-col-sm6 layui-col-md3 layui-col-lg3">
                                <label class="layui-form-label data_label">进浆流量</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="flow_in" name="jinjiang" th:value="${session.realTimeData.flow_in1}" class="layui-input input_data" readonly="readonly" style="color: #00b200">
                                </div>
                            </div>
                            <div class="layui-col-xs12 layui-col-sm6 layui-col-md3 layui-col-lg3">
                                <label class="layui-form-label data_label">返浆流量</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="flow_out" name="yali" th:value="${session.realTimeData.flow_out1}" class="layui-input input_data" readonly="readonly" style="color: #00b200">
                                </div>
                            </div>
                            <div class="layui-col-xs12 layui-col-sm6 layui-col-md3 layui-col-lg3">
                                <label class="layui-form-label data_label">返浆密度</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="density_of_flow_out" name="yali" th:value="${session.realTimeData.density_of_flow_out1}" class="layui-input input_data" readonly="readonly" style="color: #0000fe">
                                </div>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs12 layui-col-sm6 layui-col-md1 layui-col-lg1">
                                &nbsp;
                            </div>
                            <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3">
                                <label class="layui-form-label data_label">流&nbsp;&nbsp;量</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="quantity" name="yali" th:value="${session.realTimeData.flow_in1-session.realTimeData.flow_out1}" class="layui-input input_data" readonly="readonly" style="color: #00b300">
                                </div>
                            </div>
                            <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3">
                                <label class="layui-form-label data_label">密&nbsp;&nbsp;度</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="density" name="yali" th:value="${session.realTimeData.density1}" class="layui-input input_data" readonly="readonly" style="color: #009fc2">
                                </div>
                            </div>
                            <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3">
                                <label class="layui-form-label data_label">抬&nbsp;&nbsp;动</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="shift" name="yali" th:value="${session.realTimeData.shift1}" class="layui-input input_data" readonly="readonly" style="color: #c26400">
                                </div>
                            </div>
                            <div class="layui-col-xs12 layui-col-sm6 layui-col-md1 layui-col-lg1">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<div style="text-align: center;">
    <div class="layui-inline">
        <table style="margin-left: 50px" id="constructionList" lay-filter="construction"></table>
    </div>
</div>

<script th:src="@{/layui/layui.js}"></script>
<!--<script src="../layui/layui.js"></script>-->
<script th:inline="javascript" type="text/javascript" >
    layui.use(['table','form','layer','jquery'],function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;

        table.render({
            elem:"#constructionList"
            ,height:400
            ,width:1100
            ,url: 'json/processData.json' //数据接口
            ,page: true //开启分页
            ,cellMinWidth:90
            ,title:"实时数据"
            ,cols: [
                [ //表头
                {field: 'time', title: '时间',align:"center", width:200}
                ,{field: 'yali', title: '压力',align:"center", width:110,templet:function (d) {
                        return d.yali+" MPa";
                    }}
                ,{field: 'liuliang', title: '流量',align:"center", width: 110,templet:function (d) {
                        return d.liuliang+" L/min";
                    }}
                ,{field: 'jinjiang', title: '进浆流量',align:"center", width: 110,templet:function (d) {
                        return d.jinjiang+" L/min";
                    }}
                ,{field: 'fanjiang', title: '返浆流量',align:"center", width: 110,templet:function (d) {
                        return d.fanjiang+" L/min";
                    }}
                ,{field: 'midu', title: '密度',align:"center", width: 120,templet:function (d) {
                        return d.midu+" g/cm³";
                    }}
                ,{field: 'zhuangtai', title: '状态',align:"center",templet:function (d) {
                        if(1 == d.zhuangtai){
                            return "<span style='color: #3ff012'>在线</span>";
                        }else{
                            return "<span style='color: red'>不在线</span>";
                        }
                    }}
                ]
            ]
        });
        // 开始按钮切换
        $("#start").click(function () {
            var start = $("#start").find(".iconfont");
            var pause = $("#pause").find(".iconfont");
            var font = $(this).find("span");
            if(start.hasClass('icon-kaishi')){
                layer.msg("通道已开启",{icon:1,time:2000});
                start.attr("class","iconfont icon-weibiaoti517");
                font.text("停止");
            }else if(start.hasClass('icon-weibiaoti517')){
                layer.msg("通道已停止",{icon:1,time:2000});
                start.attr("class","iconfont icon-kaishi running");
                if(pause.hasClass("icon-kaishi")){
                    pause.attr("class","iconfont icon-zanting1");
                    $("#pause").find("span").text("暂停");
                }
                font.text("开始");
            }
        });
        // 暂停状态的value数值
        var flag_pause = null;
        // 暂停按钮切换
        $("#pause").click(function () {

            var start = $("#start").find(".iconfont");
            var pause = $("#pause").find(".iconfont");
            // 判断“继续/暂停”状态
            if(start.hasClass("icon-weibiaoti517")){
                if(pause.hasClass("icon-zanting1")){
                    // layer.msg("请选择暂停状态！",{icon:6});
                    /**
                     * 显示暂停状态的redio组   ------------------------- start
                     * */
                    var html = "<form class='layui-form' action='' id='pause_type'>" +
                        "    <div class='layui-form-item'>" +
                        "        <div class='layui-inline'>" +
                        "            <input type='radio' name='pauseType' lay-filter='pauseType' value='1' title='待浆'>" +
                        "        </div>" +
                        "        <div class='layui-inline'>" +
                        "            <input type='radio' name='pauseType' lay-filter='pauseType' value='2' title='变浆'>" +
                        "        </div>" +
                        "        <div class='layui-inline'>" +
                        "            <input type='radio' name='pauseType' lay-filter='pauseType' value='3' title='中断'>" +
                        "        </div>" +
                        "        <div class='layui-inline'>" +
                        "            <input type='radio' name='pauseType' lay-filter='pauseType' value='4' title='堵漏'>" +
                        "        </div>" +
                        "        <div class='layui-inline'>" +
                        "            <input type='radio' name='pauseType' lay-filter='pauseType' value='5' title='间歇'>" +
                        "        </div>" +
                        "        <div class='layui-inline'>" +
                        "            <input type='radio' name='pauseType' lay-filter='pauseType' value='6' title='活动转杆'>" +
                        "        </div>" +
                        "        <div class='layui-inline'>" +
                        "            <input type='radio' name='pauseType' lay-filter='pauseType' value='7' title='其他'>" +
                        "        </div>" +
                        "        <div class='layui-inline'>" +
                        "            <input type='radio' name='pauseType' lay-filter='pauseType' value='8' title='抬动初始值设置'>" +
                        "        </div>" +
                        "        <div class='layui-inline'>" +
                        "            <input type='radio' name='pauseType' lay-filter='pauseType' value='9' title='劈裂'>" +
                        "        </div>" +
                        "        <div class='layui-inline'>" +
                        "            <input type='radio' name='pauseType' lay-filter='pauseType' value='10' title='管占'>" +
                        "        </div>" +
                        "    </div>" +
                        "" +
                        "</form>";
                    var paruse_type_index = layer.open({
                        type:4,
                        content:[html,'#pause'],
                        area:"auto",
                        shade:0.01,
                        tips:[3,"#00cb00"],
                        shadeClose:true,
                        success:function () {

                        }
                    });
                    form.render('radio');
                    // 局部变量：前一个暂停状态的redio，用于取消暂停状态，选中上一个radio
                    var preRedio = null;
                    $("input[name=pauseType]").each(function () {
                        var pauseTypeNu = $(this).val();
                        if(flag_pause == pauseTypeNu){
                            preRedio = $(this);
                            $(this).prop("checked",true);
                        }
                    });
                    form.render('radio');

                    // 设置radio的hover事件
                    var redioHover = function (){
                        $(".layui-form-radio").hover(function () {
                            $(this).find("i").attr("style","color:#ff4901 !important");
                            $(this).find("i").next().attr("style","color:#ff4901 !important");
                            // $(this).find("i").html("&#xe643;");
                            // console.log($(this).find("i"));
                        },function () {
                            $(this).find("i").attr("style","color:#ffffff !important");
                            $(this).find("i").next().attr("style","color:#ffffff !important");
                            // var pauseTypeNu = $(this).prev().val();
                            // if(flag_pause != pauseTypeNu){
                            //     $(this).find("i").html("&#xe63f;");
                            // }
                        });
                    };

                    // radio点击事件
                    form.on('radio(pauseType)', function(data){
                        // 判断是否是当前暂停类型
                        if(data.value == flag_pause){
                            return;
                        }
                        // $(data.elem).next().find("i").html("&#xe643;");
                        layer.confirm("是否以“"+data.elem.title+"”状态暂停？",{
                            cancel:function f(index, layero) {      // 弹框销毁函数
                                $('input:radio[name=pauseType]').prop('checked',false);
                                if(null!=preRedio){
                                    preRedio.prop("checked",true);
                                }
                                form.render('radio');
                                redioHover();
                            }
                        },function (index) {
                            layer.close(index);
                            // 改变按钮样式
                            pause.attr("class","iconfont icon-kaishi running");
                            $("#pause").find("span").text("继续");
                            var loadIndex = layer.load(2,{time:2000},function () {
                                layer.close(loadIndex);
                                layer.msg("已暂停！",{icon:1,time:2000});
                            });
                            // layer.msg("已暂停！",{icon:1,time:2000});
                            layer.close(paruse_type_index);
                            flag_pause = data.value;
                            redioHover();
                        },function () {
                            $('input:radio[name=pauseType]').prop('checked',false);
                            if(null!=preRedio){
                                preRedio.prop("checked",true);
                            }
                            form.render('radio');
                            redioHover();
                        });
                    });
                    /**
                     * 显示暂停状态的redio组   ------------------------- end
                     * */
                    redioHover();
                }else if(pause.hasClass("icon-kaishi")){
                    layer.msg("通道已继续开启",{icon:1,time:2000});
                    pause.attr("class","iconfont icon-zanting1");
                    $("#pause").find("span").text("暂停");
                }
            }else{
                layer.msg("请先开始施工！",{icon:9,time:2000})
            }
        });
        // 参数设置
        $("#param_set").click(function () {
            /*var basicPage = parent.layer.open({
                type:2,
                content:"parammeterSetings.html",
                area:["80%","80%"],
                title:false,
                move: false,
                maxmin:false,
                resize:false,
                scrollbar:true,
                closeBtn:0,
                success:function (layero, index) {
                    curindex = index;
                },
                end:function () {
                    window.sessionStorage.removeItem("index2");
                }
            });
            parent.layer.full(basicPage);
            window.sessionStorage.setItem("index2",basicPage);
            $(window).on("resize",function () {
                var index2 = window.sessionStorage.getItem("index2");
                if(undefined!=index2){
                    parent.layer.full(index2);
                }
            });*/
            window.location.href = "/public/parammeterSetings";
        });

        // 报表查看窗口的全局窗口对象  用于判断页面是否已打开
        var win = null;
        // 报表查看
        $("#reportView").click(function () {
            if (win== null || win.closed) {
                var loginhref= "/report/reportPage";
                //窗口不存在
                win = window.open(loginhref);
            } else {
                //窗口以已经存在了
                win.focus();
                win.location.replace("/report/reportPage");
            }
        });

        var interval1 = null;
        var interval2 = null;
        var channel = 1;
        // 定时器实时数据函数参数
        var setRealTimeData = function(){
            $.ajax({
                type:"POST",
                url:"/public/changeChannel",
                data:{
                    id:[[${session.realTimeData.getDev_id()}]]
                },
                success:function (result) {
                    console.log(result);
                    if(1==channel){
                        $("#curState").val(result.work_state1);
                        $("#pressure").val(result.pressure1);
                        $("#flow_in").val(result.flow_in1);
                        $("#flow_out").val(result.flow_out1);
                        $("#density_of_flow_out").val(result.density_of_flow_out1);
                        $("#quantity").val(result.flow_in1-result.flow_out1);
                        $("#shift").val(result.shift1);
                        $("#channel_input").val("2");
                        $("#channel").text("1");
                    }else if(2==channel){
                        $("#curState").val(result.work_state2);
                        $("#pressure").val(result.pressure2);
                        $("#flow_in").val(result.flow_in2);
                        $("#flow_out").val(result.flow_out2);
                        $("#density_of_flow_out").val(result.density_of_flow_out2);
                        $("#quantity").val(result.flow_in2-result.flow_out2);
                        $("#shift").val(result.shift2);
                        $("#channel_input").val("1");
                        $("#channel").text("2");
                    }
                },
                error:function () {
                    console.log("通道"+channel+"实时数据获取失败..............");
                }
            });
        };
        //
        interval1 = setInterval(setRealTimeData,5000);
        //通道切换
        $("#channel_switch").click(function () {
            channel = $("#channel").text();
            if(1==channel){
                var index = layer.load();
                $.ajax({
                    type:"POST",
                    url:"/public/changeChannel",
                    data:{
                        id:[[${session.realTimeData.getDev_id()}]]
                    },
                    success:function (result) {
                        // console.log(result);
                        $("#curState").val(result.work_state2);
                        $("#pressure").val(result.pressure2);
                        $("#flow_in").val(result.flow_in2);
                        $("#flow_out").val(result.flow_out2);
                        $("#density_of_flow_out").val(result.density_of_flow_out2);
                        $("#quantity").val(result.flow_in2-result.flow_out2);
                        $("#shift").val(result.shift2);
                        $("#channel_input").val("1");
                        $("#channel").text("2");
                        channel = 2;
                        clearInterval(interval1);
                        layer.close(index);
                        interval2 = setInterval(setRealTimeData,5000);
                    },
                    error:function () {
                        console.log("切换通道2失败..............");
                        layer.close(index);
                    }
                });
            }else if(2==channel){
                var index = layer.load();
                $.ajax({
                    type:"POST",
                    url:"/public/changeChannel",
                    data:{
                        id:[[${session.realTimeData.getDev_id()}]]
                    },
                    success:function (result) {
                        // console.log(result);
                        $("#curState").val(result.work_state1);
                        $("#pressure").val(result.pressure1);
                        $("#flow_in").val(result.flow_in1);
                        $("#flow_out").val(result.flow_out1);
                        $("#density_of_flow_out").val(result.density_of_flow_out1);
                        $("#quantity").val(result.flow_in1-result.flow_out1);
                        $("#shift").val(result.shift1);
                        $("#channel_input").val("2");
                        $("#channel").text("1");
                        channel = 1;
                        clearInterval(interval2);
                        layer.close(index);
                        interval1 = setInterval(setRealTimeData,5000);
                    },
                    error:function () {
                        console.log("切换通道1失败..............");
                        layer.close(index);
                    }
                });
            }else{
                clearInterval(interval1);
                clearInterval(interval2);
                layer.msg("系统出错！请联系管理员！",{icon:5,time:2000});
            }
        });
        // 返回
        $("#back").click(function () {
           // parent.layer.close(window.sessionStorage.getItem("index1"));
           // window.location.href="/public/showData";
            window.history.back(-1);
        });
        form.render();
    });
    
</script>
</body>
</html>